<template>
	<div class="copyright-content">
		<div class="mydetails">
			<div class="details">
				<div class="details_title">我的预约</div>
				<div class="details_line">
					<div class="details_line_view"></div>
				</div>
				<!-- <div class="details_kongcont">
					<div>
						<span></span>
						<span>没有找到符合要求的结果</span>
					</div>
				</div> -->
				<div class="myists">
					<div class="myists_view">
						<div class="myists_li">
							<span>1.</span>
							<span>2018年7月14日 9:00 -10:00</span>
							<span>联系人：张先生</span>
							<span>电话：137****2299</span>
							<span>咨询完成</span>
							<span @click="lookAppointmentDetail(1)">详情</span>
						</div>

					</div>
					<!--分页-->
					<pagination style="margin-top: 27px;" :total="total" :current-page='current' :fromType="fromType" @pageAppointmentList="pagechange"></pagination>

				</div>
			</div>
		</div>
		<Modal
			v-model="appointmentStatus"
			title="预约详情"
			width='800px'
			footer-hide
			:closable="false"
			id="contect_detail">
			<div class="details">
				<div class="details_content">
					<div class="details_li frame">
						<span class="details_spanone">咨询时段：</span>
						<span class="details_spantwo timeInterval"></span>
					</div>
					<div class="details_li state">
						<span class="details_spanone">预约状态：</span>
						<span class="details_spantwo status"></span>
					</div>

					<div class="details_li name">
						<span class="details_spanone">联系人姓名：</span>
						<span class="details_spantwo customerName"></span>
					</div>
					<div class="details_li iphone">
						<span class="details_spanone">联系人电话：</span>
						<span class="details_spantwo customerPhone"></span>
					</div>
					<div class="details_li email">
						<span class="details_spanone">联系人邮箱：</span>
						<span class="details_spantwo customerEmail"></span>
					</div>
					<div class="describe">
						<span class="details_spanone">咨询描述：</span>
						<span class="details_text desContent"></span>
					</div>
					<div class="evaluate">
						<span class="details_spanone">评价信息：</span>
						<span class="details_text evaluateContent"></span>
					</div>

					<div class="details_btn">
						<div class="btn_quxiao" @click="closeAppointment">关闭</div>
						<div class="btn_div btn_xiugai" @click="editAppointment"  v-if="data.status ==='0' || data.status ==='1'">修改预约</div>
						<div class="btn_div btn_quxiaoyuyue" @click="cancelAppointment" v-if="data.status ==='0' || data.status ==='1' ">取消预约</div>
						<div class="btn_div btn_pjia" @click="remarkConsult" v-if="data.status ==='2'&& data.evaluateContent ==='' ">评价</div>
						<div class="btn_div btn_xgpjia" @click="editRemark" v-if="data.status ==='2'&& data.evaluateContent !=='' ">修改评价</div>
						<div style="clear: both;"></div>
					</div>
				</div>
			</div>
		</Modal>
		<Modal
			v-model="editAppointmentStatus"
			title="预约详情"
			width='500px'
			footer-hide
			:closable="false"
			id="popup_yuyue">
			<!-- <div class="popup-yuyue-div"> -->
				<div class="popup-yuyue-times">
					<span class="consultionTime">咨询时段：</span>
					<span class="time_duan">2018年7月5日  09:00 - 10:00</span>
				</div>
				<div class="popup-yuyue-input">
					<span class="consultion-descript"><span style="color:#E94747 ;">*</span>联系人姓名：</span>
					<input type="text" autocomplete="off" name="customerName" id="customerName" value="" maxlength="50" />
				</div>
				<div class="popup-yuyue-input">
					<span class="consultion-descript"><span style="color:#E94747 ;">*</span>联系人电话：</span>
					<input type="text" autocomplete="off" name="customerPhone" id="customerPhone" value="" maxlength="20" />
				</div>
				<div class="popup-yuyue-input">
					<span class="consultion-descript"><span style="color:#E94747 ;">*</span>联系人邮箱：</span>
					<input type="text" autocomplete="off" name="customerEmail" id="customerEmail" value="" maxlength="50" />
				</div>
				<div class="popup-yuyue-input">
					<span class="consultion-descript"><span style="color:#E94747 ;">*</span>咨询描述：</span>
					<textarea name="desContent" autocomplete="off" id="desContent" rows="" cols="" maxlength="500"></textarea>
				</div>
				<div class="popup-yuyue-btn">
					<div class="popup-yuyue-quxiao" @click="cancelEditAppointment">取消</div>
					<button class="popup-yuyue-tijiao" @click="submitEditAppointment" value="提交">提交</button>
				</div>
			<!-- </div> -->
		</Modal>
		<Modal
			v-model="submitSuccess"
			title="提示"
			width='498px'
			footer-hide
			:closable="false"
			id="submit_success">
			<div  class="popup-text">
				<div class="jie">
					<!-- <div>提交成功</div> -->
					<div>{{confirmValueOne}}，</div>
					<div>{{confirmValueTwo}}</div>
				</div>
				<button class="popup-yuyue-tijiao" @click="closeModel">确定</button>
				
			</div>
		</Modal>
		<!-- 评价 -->
		<Modal
			v-model="remarkStatus"
			title="评价详情"
			width='500px'
			footer-hide
			:closable="false"
			id="remark">
			<textarea v-model="remarkInfo" name="evaluateContent" id="evaluateContent" rows="" cols="" maxlength="500"></textarea>
			<div class="popup-yuyue-btn">
				<div class="popup-yuyue-quxiao" @click="cancelRemark">取消</div>
				<button class="popup-yuyue-tijiao" @click="submitRemark" value="提交">提交</button>
			</div>
		</Modal>
		

	</div>
	
</template>

<script>
	import pagination from '../common/pagination/pagination'
	export default {
		components: {
			pagination,
			
		},
		data() {
			return {
				data:{
					evaluateContent:'11111',
					status:'2'
				},
				// 预约详情
				appointmentStatus:false,
				// 编辑预约详情
				editAppointmentStatus:false,
				// 提交成功
				submitSuccess:false,
				confirmValueOne:'',
				confirmValueTwo:'',
				// 评价
				remarkStatus:false,
				// 分页页面区分来源
				fromType:'pageAppointmentList',
				total: 40, // 记录总条数
				display: 10, // 每页显示条数
				current: 1, // 当前的页数
				
				remarkInfo:'', //评价信息
			};
		},
		methods:{
			pagechange(currentPage) {
				console.log("我的预约="+currentPage);
				// ajax请求, 向后台发送 currentPage, 来获取对应的数据
			},
			// 查看详情
			lookAppointmentDetail(ID){
				console.log('查看详情')
				this.appointmentStatus = true;
			},
			// 关闭预约详情
			closeAppointment(){
				setTimeout(() => {
					this.$Modal.remove();
					this.appointmentStatus = false
				}, 2000);
			},
			// 取消预约
			cancelAppointment(){
				this.confirmValueOne='最晚可在咨询开始前24小时取消，';
				this.confirmValueTwo='本次预约无法取消。';
				this.submitSuccess = true;
			},
			// 修改预约详情
			editAppointment(){
				console.log("编辑详情")
				setTimeout(() => {
					this.$Modal.remove();
					this.appointmentStatus = false;
					this.editAppointmentStatus = true;
				}, 2000);
			},
			// 取消编辑预约详情
			cancelEditAppointment(){
				this.$Modal.remove();
				this.editAppointmentStatus = false;
			},
			// 提交编辑预约详情
			submitEditAppointment(){
				setTimeout(() => {
					this.$Modal.remove();
					this.editAppointmentStatus = false;
					this.confirmValueOne='提交成功';
					this.confirmValueTwo='';
					this.submitSuccess = true;
				}, 2000);
			},
			// 提交成功确认
			closeModel(){
				this.$Modal.remove();
				this.submitSuccess = false;
			},
			// 评价
			remarkConsult(){
				this.remarkInfo='';
				this.remarkStatus= true;
			},
			// 编辑评价
			editRemark(){
				this.remarkInfo=this.data.evaluateContent;
				this.remarkStatus= true;
			},
			// 取消评价
			cancelRemark(){
				this.$Modal.remove();
				this.remarkStatus= false;
			},
			// 提交评价
			submitRemark(){
				setTimeout(() => {
					this.$Modal.remove();
					this.remarkStatus= false;
				}, 2000);
			}
		}
	}
</script>

<style>
	@import 'law.css';
	.copyright-content{
		background: #6081FF;
		height: 260px;
	}
</style>
